<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item>
              <el-radio-group v-model="queryData.settlementStatus" type="button" @change="settlementStatusChange">
                <el-radio-button label="NO_SETTLEMENT">未结算</el-radio-button>
                <el-radio-button label="HAS_SETTLEMENT">已结算</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-input v-model="refNumber" type="textarea" :rows="1" style="width: 320px;" placeholder="订单号" />
            </el-form-item>
            <el-form-item v-if="!isOrgOwner">
              <el-select v-model="queryData.customer" filterable clearable placeholder="请选择客户">
                <el-option v-for="item in customerOptions" :key="item.orgOwnerName" :value="item.orgOwner" :label="item.orgOwnerName" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="list">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <el-table
          :data="table_body"
          border
          stripe
          :max-height="tableHeight"
          :summary-method="getSummaries"
          :show-summary="queryData.settlementStatus === 'NO_SETTLEMENT'"
        >
          <el-table-column prop="txId" label="交易号" />
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="accountIdProvider" label="收款方" />
          <el-table-column prop="accountIdConsumer" label="付款方" />
          <el-table-column prop="txDate" label="交易时间" />
          <el-table-column prop="serviceType" label="交易类型">
            <template slot-scope="scope">
              <div v-if="scope.row.serviceType==='SERVICE_TRANSACTION'">服务扣款</div>
              <div v-else-if="scope.row.serviceType==='REFUND'">退款</div>
            </template>
          </el-table-column>
          <el-table-column prop="currency" label="币种" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="chargeType" label="费用类型" />
          <el-table-column prop="settlementAmount" label="结算金额" />
          <el-table-column prop="settlementStatus" label="结算状态" />
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <el-pagination background :current-page="queryData.currentPage" :page-sizes="[50,100]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" style="float:right;" @size-change="onPageSizeChange" @current-change="onPageChange" />
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import request from '@/utils/request'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      table_body: [

      ],
      queryData: {
        pageSize: 50,
        currentPage: 1,
        customer: '',
        settlementStatus: 'NO_SETTLEMENT',
        refNumbers: []
      },
      refNumber: '',
      pageTotal: 0,
      pageSizeOpts: [50, 100],
      totalAmount: ''
    }
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 260
    },
    pageSize() {
      return this.pageSizeOpts[0]
    },
    ...mapState(//
      {
        customerOptions: state => state.base.customerOptions,
        profile: state => state.user
      }
    ),
    isOrgOwner() {
      return this.profile.orgOwner
    }
  },
  created() {
    this.$store.dispatch('getCustomerOptions')
    this.list()
  },
  mounted() {
  },
  methods: {
    list() {
      if (this.refNumber) {
        this.queryData.refNumbers = this.refNumber.split(/\n|,|，/)
      } else {
        this.queryData.refNumbers = []
      }
      request({
        url: 'account/transaction',
        method: 'post',
        data: this.queryData
      }).then(res => {
        if (res.success) {
          if (res.data) {
            this.table_body = res.data.page.records
            this.pageTotal = res.data.page.total
            this.totalAmount = res.data.totalAmount
          }
        }
      })
    },
    getSummaries(param) {
      if (!this.refNumber && !this.queryData.customer) {
        return ['', '', '', '', '', '', '合计', '请先选择查询条件', '', '', '']
      }
      return ['', '', '', '', '', '', '合计', this.totalAmount, '', '', '']
    },
    settlementStatusChange() {
      this.queryData.pageSize = 50
      this.queryData.currentPage = 1
      this.list()
    },
    onPageSizeChange(pageSize) {
      this.queryData.pageSize = pageSize
      this.queryData.currentPage = 1
      this.list()
    },
    onPageChange(page) {
      this.queryData.currentPage = page
      this.list()
    }
  }
}
</script>
